import { type FormEvent, useState } from "react";

const handleSubmit = ( e: FormEvent<HTMLFormElement>, to:string, message:string) => {
	e.preventDefault();
	alert(`You said ${message} to ${to}`)
}
const Form = () => {
	const [ to, setTo ] = useState( 'Alice' );
	const [ message, setMessage ] = useState( 'Hello' );
	return (
		<form onSubmit={e => handleSubmit(e, to, message)}>
			<label>
				To:{' '}
				<select
					value={to}
					onChange={e => setTo(e.target.value)}>
					<option value="Alice">Alice</option>
					<option value="Bob">Bob</option>
				</select>
			</label>
			<div>
				<textarea
					value={message}
					onChange={e => setMessage(e.target.value)}
					placeholder="Message"
				/>
			</div>

			<button type="submit">Send</button>
		</form>
	)
}

export default Form;


